<div class="content__title">
    <h1>Image Cropper</h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="6">
        <nz-card>
            <ng-template #body>
                <h3 class="text-md">Select an image file</h3>
                <button nz-button class="ant-btn__block file-upload mt-sm">
                    <input id="file1" accept type="file" (change)="fileChange($event)" />
                    <i class="anticon anticon-upload"></i><span>Upload a image</span>
                </button>
                <h3 class="text-md my-md">Crop type</h3>
                <nz-radio-group [(ngModel)]="cropperSettings.rounded">
                    <label nz-radio-button [nzValue]="false"><span>Square</span></label>
                    <label nz-radio-button [nzValue]="true"><span>Circle</span></label>
                </nz-radio-group>
                <div class="my-md" *ngIf="data1.image">
                    <h3 class="text-md">Cropped image</h3>
                    <img [class.rounded-circle]="cropperSettings.rounded"
                        [src]="data1.image"
                        [width]="cropperSettings.croppedWidth"
                        [height]="cropperSettings.croppedHeight">
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="18">
        <div nz-row>
            <div nz-col [nzSpan]="24">
                <nz-card>
                    <ng-template #body>
                        <img-cropper #cropper [image]="data1" [settings]="cropperSettings" (onCrop)="cropped($event)"></img-cropper>
                    </ng-template>
                </nz-card>
            </div>
        </div>
    </div>
</div>
